<template>
    <div class="shopDetail" v-if="shopDetail">
        <div class="header" :class="headerFixed?'fixed':''">
            <div class="backBtn iconBtn" @click="$router.back()">
                <template v-if="headerFixed"><svg t="1670683907455" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1894" width="48" height="48"><path d="M596.377143 1023.767273a40.727273 40.727273 0 0 1-29.090909-11.869091L104.857143 546.443636A40.494545 40.494545 0 0 1 104.857143 488.727273L579.155325 12.101818a40.820364 40.820364 0 0 1 57.949091 57.483637L191.431688 517.585455l433.803637 436.363636a40.727273 40.727273 0 0 1-28.858182 69.818182z" p-id="1895" fill="#000000"></path></svg></template>
                <template v-else><svg t="1670578799022" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2115" width="48" height="48"><path d="M596.377143 1023.767273a40.727273 40.727273 0 0 1-29.090909-11.869091L104.857143 546.443636A40.494545 40.494545 0 0 1 104.857143 488.727273L579.155325 12.101818a40.820364 40.820364 0 0 1 57.949091 57.483637L191.431688 517.585455l433.803637 436.363636a40.727273 40.727273 0 0 1-28.858182 69.818182z" p-id="2116" fill="#ffffff"></path></svg></template>
            </div>
            <div class="right">
                <div class="searchBtn iconBtn">
                    <template v-if="headerFixed"><img src="@/assets/img/icon/welfares.png" alt=""></template>
                    <template v-else><img src="@/assets/img/icon/magnifier.png" alt=""></template>
                </div>
                <div class="collectBtn iconBtn">
                    <template v-if="headerFixed"><img src="@/assets/img/icon/collect_black.png" alt=""></template>
                    <template v-else><img src="@/assets/img/icon/collect_whtie.png" alt=""></template>
                </div>
                <div class="moreBtn iconBt">
                    <van-popover v-model:show="showPopover" theme="dark" placement="bottom-end" :actions="popoverActions" @select="popoverSelect">
                        <template #reference>
                            <template v-if="headerFixed"><svg t="1670684098942" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2109" width="1.5rem" height="1.5rem"><path d="M746.662019 512c0 51.835575 42.044582 93.865831 93.865831 93.865831 51.851948 0 93.865831-42.029232 93.865831-93.865831 0-51.836599-42.013883-93.865831-93.865831-93.865831C788.706601 418.135192 746.662019 460.163401 746.662019 512z" p-id="2110" fill="#000000"></path><path d="M89.604272 512c0 51.835575 42.043558 93.865831 93.864808 93.865831 51.822272 0 93.865831-42.029232 93.865831-93.865831 0-51.836599-42.043558-93.865831-93.865831-93.865831C131.648854 418.135192 89.604272 460.163401 89.604272 512z" p-id="2111" fill="#000000"></path><path d="M418.132634 512c0 51.835575 42.013883 93.865831 93.866854 93.865831 51.821249 0 93.864808-42.029232 93.864808-93.865831 0-51.836599-42.043558-93.865831-93.864808-93.865831C460.146517 418.135192 418.132634 460.163401 418.132634 512z" p-id="2112" fill="#000000"></path></svg></template>
                            <template v-else><svg t="1670579254424" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3108" width="1.5rem" height="1.5rem"><path d="M746.662019 512c0 51.835575 42.044582 93.865831 93.865831 93.865831 51.851948 0 93.865831-42.029232 93.865831-93.865831 0-51.836599-42.013883-93.865831-93.865831-93.865831C788.706601 418.135192 746.662019 460.163401 746.662019 512z" p-id="3109" fill="#ffffff"></path><path d="M89.604272 512c0 51.835575 42.043558 93.865831 93.864808 93.865831 51.822272 0 93.865831-42.029232 93.865831-93.865831 0-51.836599-42.043558-93.865831-93.865831-93.865831C131.648854 418.135192 89.604272 460.163401 89.604272 512z" p-id="3110" fill="#ffffff"></path><path d="M418.132634 512c0 51.835575 42.013883 93.865831 93.866854 93.865831 51.821249 0 93.864808-42.029232 93.864808-93.865831 0-51.836599-42.043558-93.865831-93.864808-93.865831C460.146517 418.135192 418.132634 460.163401 418.132634 512z" p-id="3111" fill="#ffffff"></path></svg></template>
                        </template>
                    </van-popover>
                </div>
            </div>
        </div>
        <div class="mainArea">
            <div class="header_poster">
                <div class="poster_container">
                    <img :src="shopDetail.posterSrc" alt="">
                </div>
                <div class="mask"></div>
            </div>
            <div class="headerArea">
                <div class="header_info">
                    <div class="header_info_card">
                        <div class="header_info_card_info">
                            <div class="header_info_card_info_left">
                                <div class="shopName">{{shopDetail.name}}</div>
                                <div class="shopService">
                                    <template v-for="(item,index) in shopDetail.service" :key="index">
                                        <span>{{item}}</span>
                                        <template v-if="(index != shopDetail.service.length)">·</template>
                                    </template>
                                    <!-- <span>约55分钟</span>·
                                    <span>月售1000+</span>·
                                    <span>支持自取</span>·
                                    <span>食无忧</span> -->
                                </div>
                            </div>
                            <div class="header_info_card_info_right">
                                <div class="shopAvatar">
                                    <img :src="shopDetail.shopAvatarSrc" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="header_info_card_coupon_container">
                            <div class="shop_header_info_card_coupon_container_scale">
                                <div class="shop_coupon_wrap">
                                    <!-- <div class="shop_coupon" :class="(shopDetail.coupon.unlimited?'shop_coupon_supervip':'')"> -->
                                    <div class="shop_coupon shop_coupon_supervip">
                                        <div class="shop_coupon_left">
                                            <div class="shop_coupon_icon shop_coupon_icon_supervip"></div>
                                            <div class="shop_coupon_amount">
                                                <span class="shop_coupon_benefit_unit">¥</span>
                                                <!-- <span class="shop_coupon_benefit_amount">{{shopDetail.coupon.unlimited}}</span> -->
                                                <span class="shop_coupon_benefit_amount">2</span>
                                            </div>
                                            <div class="shop_coupon_condition">无门槛</div>
                                        </div>
                                        <div class="shop_coupon_seperator_line shop_coupon_seperator_line_supervip"></div>
                                        <div class="shop_coupon_right">
                                            <div class="shop_coupon_receive_btn">兑</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="shop_coupon_wrap">
                                    <!-- <div class="shop_coupon received shop_coupon_expand" :class="shopDetail.coupon.hotWelfares!=''?'shop_coupon_expand':''"> -->
                                    <div class="shop_coupon received shop_coupon_expand">
                                        <div class="shop_coupon_left noCondition noConditionexpand">
                                            <div class="shop_coupon_icon shop_coupon_icon_received"></div>
                                            <div class="shop_coupon_amount">
                                                <span class="shop_coupon_benefit_unit">¥</span>
                                                <!-- <span class="shop_coupon_benefit_amount">{{shopDetail.coupon.hotWelfares}}</span> -->
                                                <span class="shop_coupon_benefit_amount">14</span>
                                            </div>
                                        </div>
                                        <div class="shop_coupon_seperator_line shop_coupon_seperator_line_received"></div>
                                        <div class="shop_coupon_right">
                                            <div class="shop_coupon_receive_btn">已领</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="header_info_card_discount_container">
                            <div class="header_info_card_discount">
                                <div class="shop_n_tags_taglist">
                                    <template v-for="(item,index) in shopDetail.discountTag" :key="index">
                                        <div class="shop_n_tag">{{item}}</div>
                                    </template>
                                    <!-- <div class="shop_n_tag">40减34</div>
                                    <div class="shop_n_tag">免配送费</div>
                                    <div class="shop_n_tag">下单返奖励</div> -->
                                </div>
                            </div>
                            <div class="header_info_card_discount_total">
                                <div class="hidden_txt">2个优惠</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="header_slot">
                    <div class="shop_composite_card">
                        <div class="shop_composite_card_item">
                            <div class="collection_dot_container_long">
                                <div class="collection_dot_title_long">
                                    集满送5元红包
                                    <img class="collection_dot_help_long" src="@/assets/img/icon/collection_dot_help_long.png" alt="">
                                </div>
                                <div class="collect_dot_circle_des_container">
                                    <img class="collect_dot_circle_icon_short collect_dot_circle_icon_long" src="@/assets/img/icon/collect_dot.png" alt="">
                                    <img class="collect_dot_circle_icon_short collect_dot_circle_icon_long" src="@/assets/img/icon/collect_dot.png" alt="">
                                    <img class="collect_dot_circle_icon_short collect_dot_circle_icon_long" src="@/assets/img/icon/collect_dot.png" alt="">
                                    <img class="collect_dot_circle_icon_short collect_dot_circle_icon_long" src="@/assets/img/icon/collect_dot.png" alt="">
                                    <img class="collect_dot_circle_icon_short collect_dot_circle_icon_long" src="@/assets/img/icon/collect_dot.png" alt="">
                                    <span class="collect_dot_circle_des_short collect_dot_circle_des_long">0/5单</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tabArea">
                <!-- <div class="tabHeadersOccupy" style="display:none;"></div> -->
                <!-- <van-sticky :offset-top="44"> -->
                    <van-tabs v-model:active="activeName" animated swipeable line-width="20px">
                        <van-tab title="点餐" name="menu">
                            <menuTab 
                                :shop_id="$route.params.id"
                                @cart-change="cartChange"
                            ></menuTab>
                        </van-tab>
                        <van-tab title="评价" name="comment">
                            <template #title>评分<span class="subTitle">{{shopDetail.rating}}</span></template>
                            <commentTab 
                                :shop_id="$route.params.id"
                                :shopDetail="shopDetail"
                                :showActionSheet="showActionSheet" 
                                @open-show_action-sheet="openShowActionSheet"
                            ></commentTab>
                        </van-tab>
                        <van-tab title="商家" name="business">
                            <businessTab :shopDetail="shopDetail"></businessTab>
                        </van-tab>
                    </van-tabs>
                <!-- </van-sticky> -->
            </div>
        </div>
    </div>
    <!-- 动态面板 -->
    <van-action-sheet
        v-model:show="showActionSheet"
        :actions="actionSheet"
        cancel-text="取消"
        close-on-click-action
        @cancel="(showActionSheet = false)"
        z-index="2000"
    />
    <!-- 分享面板 -->
    <van-share-sheet
        v-model:show="showShareSheet"
        title="分享到"
        :options="shareSheetOptions"
        @select="shareSheetSelect"
    />
    <shopCart 
        v-if="activeName == 'menu'" 
        :cartDisable="cartDisable"
        :cartList="cartList"
    ></shopCart>
</template>

<script>
import menuTab from './components/menuTab.vue';
import commentTab from './components/commentTab.vue';
import businessTab from './components/businessTab.vue';
import shopCart from './components/shopCart.vue';
import { onMounted, ref, reactive, toRefs, onBeforeMount, watch } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import {getShopDetail} from '@/api/shopDetail';
import {getUserShopCart,addCart,modifyCart} from '@/api/cart'
export default {
    name:'ShopDetail',
    setup(){
        const route = useRoute();
        const router = useRouter();

        // 动态面板
        const showActionSheet = ref(false);
        const actionSheet = reactive([{name:'我要举报'}]);
        const openShowActionSheet = () => {showActionSheet.value = true;}

        // 分享面板
        const showShareSheet = ref(false);
        const shareSheetOptions = [
            { name: '微信', icon: 'wechat' },
            { name: '朋友圈', icon: 'wechat-moments' },
            { name: '微博', icon: 'weibo' },
            { name: 'QQ', icon: 'qq' },
            { name: 'QQ空间', icon: require('@/assets/img/icon/qqkongjian.png') },
            { name: '钉钉', icon: require('@/assets/img/icon/dingding.png') },
            { name: '复制链接', icon: 'link' },
        ];
        const shareSheetSelect = (option) => {
            console.log(option);
        }

        const showPopover = ref(false);  // 导航栏···更多 气泡是否显示
        // 气泡数据
        const popoverActions = [
            { text: '购物车', icon: 'cart-o' },
            { text: '分享商家', icon: 'share-o' },
        ];
        const popoverSelect = (action) => {
            console.log(action)
            if(action.text == '购物车'){
                router.push('/cart');
            }
            if(action.text == '分享商家'){
                showShareSheet.value = true;
            }
        }
        // 当前tab的名字
        const activeName = ref('menu');

        const shop = reactive({
            shopDetail:null,
            menuList:[],
            commentList:[],
            cartList:[]
        })
        const {shopDetail,menuList,commentList,cartList} = toRefs(shop);
        // 获取店铺详情数据
        const getShopDetailReq = () => {
            let shopId = route.params.id;
            console.log('shopid',shopId)
            getShopDetail({id:shopId}).then(res=>{
                console.log(res);
                shopDetail.value = res.data;
                shopDetail.value.shopAvatarSrc = require('@/assets/img/shop_detail/shopAvatar/'+res.data.shopAvatarSrc);
                shopDetail.value.posterSrc = require('@/assets/img/shop_detail/poster/'+res.data.posterSrc);
                // console.log(shopDetail.value.coupon.unlimited)
            }).catch(error=>{
                console.log(error);
            })
        }
        // 获取当前用户的指定店铺的购物车
        const getUserShopCartReq = () => {
            let shopId = route.params.id;
            let userId = localStorage.getItem('userId');
            getUserShopCart({shop_id:shopId,user_id:userId}).then(res=>{
                console.log('getUserShopCartFun',res);
                if(res.code == '6200') cartList.value = res.data;
                console.log('getUserShopCartFun',cartList.value);
            }).catch(error=>{
                console.log(error);
            })
        }
        onMounted(()=>{
            // 监听滚动条位置
            window.addEventListener('scroll',handleScroll,true);
            
            // 发送请求
            getShopDetailReq();
            getUserShopCartReq();
        })
        const headerFixed = ref(false);  // 导航栏是否固定
        // 滚动事件
        const handleScroll = () => {
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            if(scrollTop >= 210) headerFixed.value = true;
            else headerFixed.value = false;
        }

        // 菜单变化自定义事件
        const cartDisable = ref(true);
        // 监听购物车 >0
        watch(cartList.value,(newVal,oldVal)=>{
            if(cartList.value.length > 0){
                cartDisable.value = false;
            }
            else{
                cartDisable.value = true;
            }
        },{
            immediate:true,
        })
        const cartChange = (val,food,type_index,food_index) => {
            if(val == 0){
                // 底部购物车栏禁用 不可以点击、图标灰色
                cartList.value = cartList.value.filter(item=>{
                    return item._id != food._id;
                })
                // 删除该条购物车请求
            }
            else{
                // val > 0 => 商品数量>=1 可以加入购物车
                let food_exist = cartList.value.filter(item=>{
                    if(food.specifications.length) return item._id == food._id && item.specifications == food.specifications;
                    else return item._id == food._id;
                });
                // 购物车表结构
                let newCart = {
                    user_id:localStorage.getItem('userId'),
                    shop_id:route.params.id,
                    food_id:food._id,
                    foodSpec:food.specifications?food.specifications:null, // 商品可选值
                    foodNum:val,  // 数量
                }
                if(food_exist.length > 0) {
                    food_exist[0].num = parseInt(val);
                    // 修改购物车
                    modifyCart(newCart).then(res=>{
                        console.log(res);
                    }).catch(error=>{
                        console.log(error);
                    })
                }
                else {
                    // 当前购物车 添加数据
                    cartList.value.push(food);
                    // 发送接口 添加购物车
                    addCart(newCart).then(res=>{
                        console.log(res);
                    }).catch(error=>{
                        console.log(error);
                    })
                }
                
            }
            // 计算价格 计算属性
            console.log('cartList',cartList.value)
        }
        return {
            showActionSheet,
            actionSheet,
            openShowActionSheet,
            showShareSheet,
            shareSheetOptions,
            shareSheetSelect,
            showPopover,
            popoverActions,
            popoverSelect,
            activeName,
            handleScroll,
            headerFixed,
            shopDetail,
            menuList,
            commentList,
            cartList,
            cartDisable,
            cartChange,

        }
    },
    components:{
        menuTab,
        commentTab,
        businessTab,
        shopCart
    }
}
</script>

<style>
.shopDetail{background: #fff; position: relative;}
.shopDetail .header.fixed{
    /* position: fixed; */
    background: #fbfbfb;
}
.shopDetail .header{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    width: 100%;
    height: 44px;
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    box-sizing: border-box;
}
.shopDetail .header .iconBtn{width: 44px;display: flex;align-items: center;}
.shopDetail .header .iconBtn>svg{width: 1.25rem;height: 1.25rem;}
.shopDetail .header .iconBtn>img{width: 1.725rem;height: 1.725rem;}
.shopDetail .header .right{display: flex;}
.shopDetail .header .right>div{
    width: 44px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.shopDetail .header .right .moreBtn span{display: flex;align-items: center;}
.shopDetail .mainArea{
    position: relative;
    min-height: 844px;
}
.shopDetail .header_poster{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 9rem;
}
.shopDetail .header_poster .mask{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
}
.shopDetail .header_poster .poster_container img{width: 100%;}

/* 店铺信息卡片 */
.shopDetail .mainArea .headerArea{position: relative;padding-top: 32px;z-index: 3;}
.shopDetail .mainArea .header_info{padding-top: 0.75rem;margin-bottom: 0.9375rem;box-sizing: border-box;}
.shopDetail .mainArea .header_info_card{
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 0.1875rem 0.9375rem 0 rgb(0 0 0 / 6%);
    border-radius: 0.5rem;
    width: 21.9375rem;
    padding: 0.625rem 0.75rem 0.6875rem 0.75rem;
    box-sizing: border-box;
}
.shopDetail .mainArea .header_info_card .header_info_card_info{display: flex;}
.shopDetail .mainArea .header_info_card .header_info_card_info_left{
    width: 85%;
    display: flex;
    flex-direction: column;
    font-size: 0.75rem;
}
.shopDetail .mainArea .header_info_card .header_info_card_info_left .shopName{
    font-size: 1.25rem;
    color: rgba(0, 0, 0, 0.9);
    height: 1.5rem;
    line-height: 1.5rem;
    font-weight: 600;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.shopDetail .mainArea .header_info_card .header_info_card_info_left .shopService{margin-top: 10px;}
.shopDetail .mainArea .header_info_card .header_info_card_info_right{width: 15%;display: flex;}
.shopDetail .mainArea .header_info_card .header_info_card_info_right .shopAvatar{
    width: 100%;
    height: 0;
    position: relative;
    padding-bottom: 100%;
    overflow: hidden;
    border-radius: 0.5rem;
}
.shopDetail .mainArea .header_info_card .header_info_card_info_right .shopAvatar img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* coupon */
.header_info_card_coupon_container{
    margin-top: 0.5625rem;
    padding-bottom: 0.5625rem;
    height: 2rem;
    overflow: hidden;
    box-sizing: border-box;
}
.shop_header_info_card_coupon_container_scale{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
    width: 40.875rem;
    max-width: 40.875rem;
    max-height: 4rem;
    overflow-y: hidden;
    overflow-x: hidden;
    transform: scale(0.5);
    transform-origin: 0 0;
}
.shop_coupon_wrap{
    display: flex;
    flex-direction: row;
    border-radius: 0.5rem;
    height: 3rem;
    margin-right: 0.5rem;
    box-sizing: border-box;
}
.shop_coupon{
    box-sizing: border-box;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 3rem;
    position: relative;
    z-index: 2;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 0.5rem;
}
.shop_coupon.received{
    color: #FF4B33;
    background-color: #FFEDEB;
    border: 0.0625rem solid #FFA599;
    background-image: none;
}
.shop_coupon_expand .shop_coupon_left{padding-left: 0;}
.shop_coupon_supervip{background-image: linear-gradient(135deg, #FFE6B5 0%, #F9D793 100%);color: #8B511E;}
.shop_coupon_left{
    box-sizing: border-box;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    height: 3rem;
}
.shop_coupon_left.noConditionexpand{padding-right: 0.25rem;}
.shop_coupon_icon{
    width: 3rem;
    height: 3rem;
    margin: 0;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0.25rem;
}
.shop_coupon_icon_supervip{background-image: url('@/assets/img/icon/shop_coupon_icon_suptervip.png');}
.shop_coupon_icon_received{background-image: url('@/assets/img/icon/shop_coupon_icon_received.png');}
.shop_coupon_amount{
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    font-size: 2.125rem;
    font-weight: 600;
    box-sizing: border-box;
}
.shop_coupon_benefit_unit{
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.75rem;
    margin-right: 0.0625rem;
}
.shop_coupon_benefit_amount{line-height: 2.125rem;}
.shop_coupon_condition{
    font-size: 1.375rem;
    white-space: nowrap;
    flex-grow: 1;
    text-align: center;
    line-height: 3rem;
    margin-right: 0.75rem;
    margin-left: 0.5rem;
    box-sizing: border-box;
}
.shop_coupon_seperator_line{
    width: 1rem;
    height: 3rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url('@/assets/img/icon/shop_coupon_seperator_line.png');
}
.shop_coupon_seperator_line_received{background-image: url('@/assets/img/icon/shop_coupon_seperator_line_received.png');}
.shop_coupon_right{
    display: flex;
    align-items: center;
    position: relative;
    height: 3rem;
    line-height: 3rem;
    margin: 0 0.75rem 0 0.25rem;
    text-align: center;
    border-radius: 0.5rem;
    box-sizing: border-box;
    white-space: nowrap;
}
.received .shop_coupon_right{box-sizing: border-box;margin-left: 0.25rem;margin-right: 0.75rem;}
.shop_coupon_receive_btn{font-size: 1.375rem;box-sizing: border-box;}

/* discount 折扣 */
.header_info_card_discount_container{
    margin-bottom: 3px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    max-height: 1.0625rem;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}
.header_info_card_discount{flex: 1;overflow: hidden;}
.shop_n_tags_taglist{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1;
    overflow: hidden;
    max-height: 1.1875rem;
    position: relative;
}
.shop_n_tag{
    margin-bottom: 0.3125rem;
    margin-right: 0.1875rem;
    position: relative;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
    height: 0.9375rem;
    font-size: 0.6875rem;
    color: transparent;
    border-radius: 0.25rem;
    padding: 0.125rem 0.25rem;
    color: rgb(255, 75, 51);
    border: 1px solid rgb(255, 165, 153);
}
.header_info_card_discount_total{
    position: relative;
    top: -0.125rem;
    padding-right: 0.875rem;
    max-width: 5.75rem;
    height: 0.875rem;
    text-align: right;
    font-size: 0.6875rem;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    direction: rtl;
}
.header_info_card_discount_total::after{
    content: '';
    display: block;
    position: absolute;
    width: 0.75rem;
    height: 0.75rem;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-image: url('@/assets/img/icon/arrow-down.png');
    background-size: 0.75rem 0.75rem;
    background-position: center center;
    background-repeat: no-repeat;
}
.hidden_txt{height: 0.875rem;line-height: 0.875rem;}

/* slot */
.header_slot{width: 100%;}
.shop_composite_card{
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0.46875rem;
    padding: 0 0.75rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.shop_composite_card_item{margin-bottom: 0.46875rem;}
.collection_dot_container_long{
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    width: 21.9375rem;
    height: 2.5rem;
    background-color: #fff;
    box-shadow: 0 0.09375rem 0.46875rem 0 rgb(0 0 0 / 6%);
    border-radius: 0.5rem;
    background-image: linear-gradient(90deg, rgba(255, 75, 51, 0) 0px, rgba(255, 75, 51, 0) 50%, rgba(255, 75, 51, 0.1));
}
.collection_dot_title_long{
    font-size: 0.875rem;
    color: #191919;
    font-weight: bold;
    line-height: 1rem;
    display: flex;
    align-items: center;
}
.collection_dot_help_long{margin-left: 0.25rem;height: 0.75rem;width: 0.75rem;}
.collect_dot_circle_des_container{
    display: flex;
    justify-items: center;
    justify-content: center;
    align-items: center;
}
.collect_dot_circle_icon_short{margin-right: 0.1875rem;width: 0.625rem;height: 0.625rem;}
.collect_dot_circle_icon_long{width: 0.75rem;height: 0.75rem;}
.collect_dot_circle_des_short{
    height: 0.8125rem;
    font-size: 0.6875rem;
    text-align: left;
    line-height: 0.8125rem;
    color: rgb(255, 75, 51);
}
.collect_dot_circle_des_long{margin-left: 0.375rem;}


/* tab */
.tabHeadersOccupy{
    width: 100%;
    height: 44px;
}
.tab_item_wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    flex-wrap: nowrap;
    width: 100%;
    padding: 0 0.75rem;
}

.tab_item{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    min-width: 3.4375rem;
    margin-right: 0.75rem;
}
.van-tabs__nav{background: transparent;}
.van-tabs__wrap.fixed{
    position: fixed;
    top: 44px;
    left: 0;
    z-index: 50;
    background: #fbfbfb;
    width: 100%;
}
.van-tabs__nav--line{padding: 0 0.75rem 10px;}
.van-tab{
    padding: 0;
    margin-right: 1.25rem;
    min-width: 3.4375rem;
    height: 2.5rem;
    line-height: 2.5rem;
    font-size: 1rem;
    flex: 0;
}
.van-tabs__line{background: rgb(2, 182, 253);}
.subTitle{  /*评分tab的副标题*/
    position: absolute;
    right: -5px;
    top: -5px;
    font-size: 12px;
    color: #aaa;
}
.van-tabs__content{min-height: 547px;}
.van-tabs__track{height: 100%;}


:root{
    --van-popover-action-width: 110px;
    --van-popover-action-font-size: 12px;
    --van-sidebar-background:transparent;
}
.van-popover{left: 265px !important;}
.van-popover[data-popper-placement=bottom-end] .van-popover__arrow{
    right: 3px;
}
</style>